page {
    background-color: $uni-bg-color-grey;
    font-family:
        PingFangSC-Regular,
        PingFang SC;
}

text {
    font-size: $font-size-24;
    color: $app-color-text-mian;
}
.main-color-text {
    color: $app-color-main;
}
.del-text {
    text-decoration: line-through;
}
.uni-tabbar {
    box-shadow: 0px -3px 38px 0px rgba(0, 0, 0, 0.1);
}
.uni-tabbar-bottom {
    z-index: 1 !important;
}

.uni-tabbar-border {
    display: none;
}

.mark {
    display: flex;
    flex: 1;
}

.item-title {
    .item-title-text {
        font-size: $font-size-28;
        font-weight: 500;
    }
}

.paddingBottomBar {
    padding-bottom: 130rpx;
}

.bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120rpx;
    background: $color-white;
    box-shadow: 0px -3px 38px 0px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding: 0 $app-page-padding;
    z-index: 2;
    padding-bottom: constant(safe-area-inset-bottom);
    /*兼容 IOS<11.2*/
    padding-bottom: env(safe-area-inset-bottom);
    /*兼容 IOS>11.2*/
    .btn {
        height: 68rpx;
        margin-left: 20rpx;
        padding: 0 40rpx;
    }
}
.no-shadow {
    box-shadow: none;
}

.examine {
    color: $color-yellow-3;
}
.success {
    color: $color-green;
}

.reject {
    color: $color-red-1;
}

.card-item,
.card-cell,
.order-item-box {
    background: $color-white;
    margin-bottom: 20rpx;
    border-radius: $border-radius-10;
}
.card-cell {
    padding: $app-page-padding;
    display: flex;
}

.pay-price {
    padding: 40rpx $app-page-padding;
    display: flex;
    justify-content: flex-end;

    text {
        font-size: $font-size-30;
    }

    .pay-price-text {
        font-weight: 700;
        color: $color-orange-1;
    }
}

/* 解决小程序和app滚动条的问题 */
/* #ifdef MP-WEIXIN || APP-PLUS */
::-webkit-scrollbar {
    display: none;
}

/* #endif */
/* 解决H5 的问题 */
/* #ifdef H5 */
uni-scroll-view .uni-scroll-view::-webkit-scrollbar {
    /* 隐藏滚动条，但依旧具备可以滚动的功能 */
    // display: none
}
/* #endif */

.custom-num {
    .uni-numbox {
        width: auto !important;
        &__value {
            width: 70rpx !important;
        }
    }
}

.radio {
    transform: scale(0.8);
}

.filter-action {
    display: flex;
    flex-direction: row;

    .btn {
        height: 72rpx;
        flex: 1;
        margin: 0 19rpx;
        border-radius: 8rpx;

        &:first-child {
            margin-left: 0;
        }

        &:last-child {
            margin-right: 0;
        }
    }
}
.bottom-bar-mark {
    height: 130rpx;
}
.num-item {
    display: flex;
    flex-direction: row;
    margin-bottom: 20rpx;

    text {
        display: flex;
        flex: 1;
    }
}
.price-text {
    color: $color-orange-1;
}

.flex-wrap {
    display: flex;
    flex-direction: row;
}

.card-cell {
    align-items: center;
    margin-bottom: 20rpx;
    .cell-icon {
        margin-right: 20rpx;
    }

    .cell-label {
        display: flex;
        flex: 1;
    }
}
.card-group {
    margin-bottom: 20rpx;
    background: $color-white;
    border-radius: $border-radius-10;
}
.header-action-bar {
    height: 40rpx;
    margin-bottom: 20rpx;
    background: $color-white;
    padding: $app-page-padding;
    display: flex;
    flex: 1;
    justify-content: flex-end;
}
.header-action-bar-title {
    justify-content: space-between;
    align-items: center;
}

.input-number-box {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    .btn-input-box {
        position: relative;
        margin: 0 4rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        .input-mark {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            max-height: 56rpx;
            top: 0;
            left: 0;
            z-index: 2;
        }
        &:before {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            max-height: 56rpx;
            top: 0;
            left: 0;
            opacity: 0.1;
        }

        .btn-input {
            position: relative;
            z-index: 1;
            height: 56rpx;
            width: 80rpx;
            line-height: 1;
            border: none;
            background: transparent;
            text-align: center;
        }
    }

    .btn-minus,
    .btn-plus {
        justify-content: center;
        align-items: center;
        position: relative;
        font-size: 45rpx;
        line-height: 56rpx;
        height: 56rpx;
        width: 56rpx;
        text-align: center;
        overflow: hidden;
        border-radius: 100rpx;

        &:before {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            top: -2rpx;
            left: 0;
            background: currentColor;
            opacity: 0.1;
        }
    }

    .color-shadow {
        // opacity: 0.1
    }
}
.btn-input-box {
    height: 44rpx;
    width: 90rpx;
    padding: 0 5rpx;
    &:before {
        background: $transparent;
    }
    .btn-input {
        width: 100%;
        font-size: $font-size-26;
    }
}
.input-number-box {
    border-radius: 100rpx;
    padding: 4rpx 6rpx;
    border: solid 1rpx #b2b2b2;
    background: #ffffff;
    .btn {
        width: 42rpx;
        height: 42rpx;
        border-radius: 100rpx;
        background: #f2f2f2;
        border: none;
        padding: 0;
        text {
            color: $color-black;
        }
    }
    .disable {
        border: none;
        text {
            color: $color-gray-C;
        }
    }
}

.img-cell {
    display: flex;
    flex: 1;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 20rpx;

    &:after {
        content: " ";
        width: 33%; //这个宽度和子元素宽度一致
        height: 0;
        display: block;
    }

    .img-item {
        position: relative;
        width: 180rpx;
        height: 180rpx;
        margin-bottom: $app-item-padding;
        margin-right: $app-item-padding;

        .img {
            width: 180rpx;
            height: 180rpx;
            border-radius: $border-radius-10;
        }

        .btn-del {
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            top: -36rpx;
            right: -36rpx;
            width: 50rpx;
            height: 50rpx;
            border-radius: 40rpx;
            background: rgba($color-black, 0.3);
            color: $color-white;
            margin: 15rpx;
        }
    }

    .add-img {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 178rpx;
        height: 178rpx;
        border-radius: $border-radius-10;
        border: dashed 1rpx $color-gray-6;
        margin-right: $app-item-padding;
        margin-bottom: $app-item-padding;

        text {
            margin-top: 6rpx;
        }
    }
}

.custom-pop-main {
    flex-direction: column;

    .filter-action {
        border-top: solid 1rpx $uni-bg-color-grey;
        padding: $app-page-padding;
    }
    .custom-pop-item-title {
        display: flex;
        padding: $app-page-padding;
    }
    .filter-price {
        display: flex;
        flex-direction: row;
        padding: 0 $app-page-padding $app-page-padding;
        .price-box {
            display: flex;
            flex: 1;
            justify-content: center;
            border-bottom: solid 1rpx $app-color-input-bg;
            input {
                text-align: center;
                font-size: $font-size-24;
            }
        }
        .line {
            margin-left: 40rpx;
            margin-right: 40rpx;
        }
    }
}

.tags {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: $app-page-padding;

    .btn {
        width: 180rpx;
        border-radius: $border-radius-10;
        border: 0;
        background: $color-gray-5;
        margin-bottom: 20rpx;
        border: solid 1rpx $color-gray-5;
        overflow: hidden;
    }

    .selected {
        border: solid 1rpx $app-color-main;
        color: $app-color-main;
        position: relative;

        &:before,
        &:after {
            content: "";
            position: absolute;
        }

        // &:before {
        // 	background: currentColor;
        // 	width: 54rpx;
        // 	height: 54rpx;
        // 	border-radius: 100%;
        // 	bottom: -27rpx;
        // 	right: -27rpx;
        // }

        // &:after {
        // 	width: 6rpx;
        // 	height: 12rpx;
        // 	border: 5rpx solid;
        // 	border-color: transparent $color-white $color-white transparent;
        // 	transform: rotate(45deg);
        // 	bottom: 6rpx;
        // 	right: 4rpx;
        // }
    }
}

.tags::after {
    content: " ";
    width: 33%; //这个宽度和子元素宽度一致
    height: 0;
    display: block;
}
.brands {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 $app-page-padding;
    margin-bottom: -$app-page-padding;
    &:after {
        content: " ";
        width: 33%; //这个宽度和子元素宽度一致
        height: 0;
        display: block;
    }
    .btn {
        width: 180rpx;
        border-radius: $border-radius-10;
        border: 0;
        background: $color-gray-5;
        margin-bottom: 20rpx;
        border: solid 1rpx $color-gray-5;
        overflow: hidden;
    }

    .selected {
        border: solid 1rpx $app-color-main;
        color: $app-color-main;
        position: relative;

        &:before,
        &:after {
            content: "";
            position: absolute;
        }

        &:before {
            background: currentColor;
            width: 54rpx;
            height: 54rpx;
            border-radius: 100%;
            bottom: -27rpx;
            right: -27rpx;
        }

        &:after {
            width: 6rpx;
            height: 12rpx;
            border: 5rpx solid;
            border-color: transparent $color-white $color-white transparent;
            transform: rotate(45deg);
            bottom: 6rpx;
            right: 4rpx;
        }
    }
}

.sort {
    display: flex;
    flex-direction: column;
    padding: $app-page-padding;
    justify-content: center;

    .sort-item {
        display: flex;
        flex-direction: row;
        height: 80rpx;
        align-items: center;

        .sort-text {
            display: flex;
            flex: 1;
        }

        .currentSort {
            color: $app-color-main;
        }
    }
}

.progress {
    display: flex;
    flex-direction: row;
    align-items: center;
    .progress-bar {
        flex: 1;
        position: relative;
        .percent-bar {
            height: 20rpx;
            overflow: hidden;
            height: 20rpx;
            border-radius: 100rpx;
            position: absolute;
            left: 0;
            top: 0;
        }
        .progress-bar-percent {
            width: 2000rpx;
            height: 20rpx;
            background: repeating-linear-gradient(-45deg, #f62d21 0, #f62d21 1%, #ff7033 1%, #ff7033 2%);
        }
        .progress-bar-bg {
            height: 20rpx;
            border-radius: 100rpx;
            background: $border;
        }
    }
    .current {
        margin-right: 10rpx;
    }
    .total {
        margin-left: 10rpx;
    }
}

.limit-tag {
    height: 32rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    text {
        font-size: $font-size-20;
    }
    .limit-tag-type {
        background: #fa6400;
        color: $color-white;
        padding: 0 6rpx;
        height: 32rpx;
        border-radius: 8rpx 0 0 8rpx;
        border: solid 1rpx #fa6400;
    }
    .limit-tag-num {
        color: #fa6400;
        padding: 0 6rpx;
        height: 32rpx;
        border-radius: 0 8rpx 8rpx 0;
        border: solid 1rpx #fa6400;
    }
}
.limit-mark {
    display: flex;
    flex: 1;
}
.limit-tip {
    display: flex;
    background: #fff6f0;
    align-items: center;
    padding: 4rpx;
    border-radius: 8rpx;
    .limit-tip-tag {
        font-size: 16rpx;
        border: solid 1rpx #fa6400;
        border-radius: 8rpx;
        color: #fa6400;
        padding: 0 6rpx;
        margin-right: 8rpx;
        height: 28rpx;
        align-items: center;
        display: flex;
    }
    .limit-tip-text {
        font-size: 16rpx;
    }
}
.vip-lv-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 34rpx;
    z-index: 1;
    position: relative;
    margin-left: 26rpx;
    margin-top: 8rpx;

    .vip-lv-img {
        width: 44rpx;
        height: 44rpx;
        margin-left: -26rpx;
        position: relative;
        z-index: 1;
    }

    .text {
        padding: 4rpx 20rpx 8rpx 4rpx;
        color: $color-white;
        position: relative;
        z-index: 1;
    }
}
.vip-bg {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #444444;
    transform: skew(-20deg);
    z-index: 0;
}
// 文本显示相关
/* 显示一行文本 超出部分使用省略号 */
.text-show-line-1 {
    overflow: hidden;
    text-overflow: -o-ellipsis-lastline;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
}
/* 显示两行文本 超出部分使用省略号 */
.text-show-line-2 {
    overflow: hidden;
    text-overflow: -o-ellipsis-lastline;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}
.flex {
    display: flex;
}
.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.flex-start {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.flex-s-s {
    display: flex;
    justify-content: space-between;
    align-items: space-between;
}
.popAmountTip {
    .pop-return-box {
        background: $color-white;
        border-radius: $border-radius-10;
        padding: $app-page-padding;
        width: 600rpx;
        margin-top: -50%;
        input {
            width: 464rpx;
            margin: 40rpx auto;
            height: 96rpx;
            background: #f0f0f0;
            border-radius: 48rpx;
            font-size: 48rpx;
            color: #000;
            text-align: center;
        }
        .pop-return-title {
            display: flex;
            justify-content: center;

            text {
                font-weight: 700;
                font-size: 34rpx;
            }
        }

        .pop-action {
            border-top: 1rpx solid rgba(0, 0, 0, 0.1);
            margin: 0 -24rpx -24rpx -24rpx;
            height: 110rpx;
            display: flex;
            align-items: center;
            justify-content: center;

            view {
                width: 50%;
                text-align: center;
                height: 110rpx;
                line-height: 110rpx;
                font-size: 34rpx;
                font-weight: bold;
                color: $app-color-main;
            }

            & > view:first-child {
                color: $color-gray-1;
                border-right: 1rpx solid rgba(0, 0, 0, 0.1);
            }
        }
    }
}
.index-page-box-mark {
    height: 1rpx;
}
.flex-v-c {
    display: flex;
    align-items: center;
}
.zindeup .uni-calendar__mask,
.zindeup .uni-calendar--fixed {
    z-index: 9999 !important;
}
.h130 {
    height: 130rpx;
    width: 100%;
}
.h200 {
    height: 200rpx;
    width: 100%;
}
.px {
    padding-left: 30rpx;
    padding-right: 30rpx;
}
.mt {
    margin-top: 30rpx;
}
.ml {
    margin-left: 30rpx;
}
.mr {
    margin-right: 30rpx;
}
.mlr-30 {
    margin-left: 30rpx;
    margin-right: 30rpx;
}
.greyline1 {
    background-color: #ebebeb;
    height: 1rpx;
}
.bei-an{
	text-align: center;
	color: #999;
	font-size: 24rpx;
	padding: 12rpx 0 40rpx 0;
}
